<template>
  <el-row type="flex" style="margin-right: 20px">
    <el-col>
      <el-card class="table" id="bar"></el-card>
    </el-col>
    <el-col>
      <el-card class="table" id="pie"></el-card>
    </el-col>
  </el-row>
</template>

<script>
import * as echarts from 'echarts'
import { getCategoriesCount } from '@/api/categories'
import { getPropertyList, getCategoriesList } from '@/api/dashboard'

export default {
  data() {
    return {
      /** pie 图 */
      pieTable: {},

      /** bar 图 */
      barTable: {},

      /** pie 图数据 */
      pieData: [],

      /** @type {[{name:'分类名',type:'bar',data:[]}]} bar 图数据 */
      barData: [],

      /** 房产列表分类 */
      propertyBarLegend: [],

      /** 房产价格 */
      barPrice: [1000, 2000, 3000, 4000, 5000, 6000],

      /** x 轴坐标 */
      barxAxis: ['<1000', '<2000', '<3000', '<4000', '<5000', '≥5000']
    }
  },
  /** 防止重复初始化 echarts */
  async mounted() {
    let pieTable = echarts.init(document.querySelector('#pie'))
    this.pieTable = pieTable
    let barTable = echarts.init(document.querySelector('#bar'))
    this.barTable = barTable
    await this.getData()
  },
  /** echarts 表格数据的渲染必须写在watch里面，虽然不知道为什么 */
  watch: {
    pieData() {
      this.initPieTable()
    },
    barData() {
      this.initBarTable()
    }
  },
  methods: {
    /** 获取数据 */
    async getData() {
      let res = await getCategoriesList()
      // console.log(res.data)

      /** 分类列表 */
      let cateSet = new Set()
      res.data.forEach(item => {
        cateSet.add(item.title)
      })
      // console.log(cateSet)
      /** 这里使用 data 来防抖, 虽然好像没什么用 */
      let data = []
      cateSet.forEach(async item => {
        /** 分类数量 */
        res = await getCategoriesCount(item)
        data.push({ value: res.data, name: item })
      })
      this.pieData = data

      /** 获取房产价格并分类 */
      res = await getPropertyList()
      // console.log(res.data)

      /** 用于获取有价格的房产的分类 */
      let propCateSet = new Set()
      /** 用于获取有价格的房产的列表数据 */
      let propData = []
      res.data.forEach(item => {
        if (item.category && item.price) {
          item.category.title = item.category.title ? item.category.title : '未知分类'
          propCateSet.add(item.category.title)
          propData.push(item)
        } else if (item.price) {
          item.category = { title: '未知分类' }
          propCateSet.add(item.category.title)
          propData.push(item)
        }
      })
      /** 分类列表 */
      this.propertyBarLegend = new Array(...propCateSet)

      propData.forEach(item => {
        /** barData 中是否已存在分类 */
        let cateFlag = false
        for (let i = 0; i < this.barData.length; i++) {
          const element = this.barData[i]
          if (item.category.title === element.name) {
            cateFlag = true
            /** 是否在价格区间内 */
            let priceFlag = false
            for (let i = 0; i < this.barPrice.length; i++) {
              const price = this.barPrice[i]
              if (item.price < price) {
                priceFlag = true
                element.data[i]++
                break
              }
            }
            /** 超出价格区间分到最大值, 即 data 最后一项 */
            if (!priceFlag) {
              element.data[element.data.length - 1]++
            }
            break
          }
        }
        /** 还没有该分类，需要添加分类数据 */
        if (!cateFlag) {
          let data = this.barPrice.map(() => {
            return 0
          })
          /** 是否在价格区间内 */
          let priceFlag = false
          for (let i = 0; i < this.barPrice.length; i++) {
            const price = this.barPrice[i]
            if (item.price < price) {
              priceFlag = true
              data[i]++
              break
            }
          }
          /** 超出价格区间分到最大值 */
          if (!priceFlag) {
            data[data.length - 1]++
          }
          this.barData.push({ name: item.category.title, type: 'bar', data })
        }
      })
    },

    /** 初始化 pie 图表 */
    async initPieTable() {
      // 指定图表的配置项和数据
      let pieOption = {
        title: {
          text: '房产数量比例'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '房产数量比例',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.pieData
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      this.pieTable.setOption(pieOption)
    },

    /** 初始化 bar 图表 */
    initBarTable() {
      // 指定图表的配置项和数据
      let barOption = {
        title: {
          text: '价格数量分布'
        },
        tooltip: {},
        legend: {
          data: this.propertyBarLegend
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {},
            magicType: {
              show: true,
              type: ['line', 'bar']
            },
            restore: {},
            saveAsImage: {
              show: true
            }
          }
        },
        xAxis: {
          name: '价格区间',
          data: this.barxAxis
        },
        yAxis: {
          name: '房产数量',
          minInterval: 1
        },
        series: this.barData
      }
      // 使用刚指定的配置项和数据显示图表。
      this.barTable.setOption(barOption)
    }
  }
}
</script>

<style lang="scss" scoped>
.table {
  margin-top: 40px;
  margin-left: 20px;
  height: 500px;
}
</style>
